<template>
  <div class="wrapper">
    <ul class="nav nav-tabs ur-nav-tabs1">
      <li class="nav-item" v-for="(nav,index) in navs" :key="index" @click="changeNav(nav)" v-if="limits.indexOf(nav.limitsId)!=-1">
        <a class="nav-link" :class="{active:navActive==nav.id}"><i class="iconfont" :class="'icon-'+nav.icon"></i>{{nav.name}}</a>
      </li>
    </ul>
    <div class="mt-4" :style="{'height':clientHeight-105+'px'}">
      <router-view></router-view>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import {mapState} from 'vuex'
  export default {
    components: {},
    props: {},
    data() {
      return {
        navActive:1,
        navs:[
          {id:1,url:'rtuList',name:'RTU控制',icon:'jizhongqi2',limitsId:'2_06_01'},
          {id:2,url:'lightList',name:'RTU单灯控制',icon:'denggan',limitsId:'2_06_02'},
          {id:3,url:'nbLightList',name:'NB单灯控制',icon:'denggan',limitsId:'2_06_03'}
        ]
      }
    },
    watch: {},
    computed: mapState({
      clientHeight:state=>state.comm.clientHeight,
      limits:state=>state.user.userInfo.limits
    }),
    methods: {
      changeNav(nav){
        this.navActive=nav.id
        this.$router.push({ path: nav.url})
      }
    },
    created() {
      let url=this.$route.path.split('/')
      for (let i = 0; i < this.navs.length; i++) {
        let v = this.navs[i]
        if (url.length == 2) {
          if (this.limits.indexOf(v.limitsId) != -1) {
            this.navActive = v.id
            this.$router.push({path: 'handController/' + v.url})
            break
          }
        } else {
          if (v.url == url[2]) {
            this.navActive = v.id
            this.$router.push({path: v.url})
          }
        }
      }
    },
    mounted() {
    }
  }
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
</style>
s
